import React, { useEffect, useRef, useState } from "react";
import {
  Button,
  SearchBar,
  Dropdown,
  Radio,
  Space,
  Toast,
  Tabs,
} from "antd-mobile";
import { ArrowDownCircleOutline, DownOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const [tabList, setTabList] = useState([]);
  const [tabIndex, setTabIndex] = useState(0);
  const navigate = useNavigate();
  let city=localStorage.getItem('citytwo')||'选择城市';
  const render = () => {
    axios.get("/api/tabSilce").then((resp) => {
      setTabList(resp.data.tabSilce);
    });
  };
  useEffect(() => {
    render();
  }, []);
  const change = (index: number) => {
    setTabIndex(index);
  };

  const detail = (item: any, index: number) => {
    let { id } = item;
    navigate(`/seekingmedicalattentiondetail/${id}/${tabIndex}`);
  };

  return (
    <div>
      <div className="nav">
        <div onClick={()=>navigate('/city')}>
          城市:<b style={{color:"red"}}>{city}</b>
        </div>
        <div onClick={()=>navigate('/search')}>
          <SearchBar placeholder="搜索医生、科室、疾病" />
        </div>
      </div>

      <div className="tu">
        <img src="../../../../src/assets/kswy.png" onClick={() => navigate('/expertr')} />
      </div>

      <div className="tutwo">
        <img src="../../../../src/assets/sjmy.png" onClick={() => navigate('/xi')} />
        <img src="../../../../src/assets/yxys.png" onClick={() => navigate('/doctor')} />
      </div>

      <div className="zys">
        <div className="zystop">
          <div>找医生</div>
          <div onClick={() => navigate("/alldepartments")}>全部科室&gt;</div>
        </div>
        <div className="zysbutton">
          <div className="zysbutton-top">
            {tabList.length > 0 &&
              tabList.map((item, index) => (
                <div
                  className={index == tabIndex ? "active" : ""}
                  onClick={() => change(index)}
                  key={index}
                >
                  {item.title}
                </div>
              ))}
          </div>
          <div className="zysbutton-button">
            {tabList.length > 0 &&
              tabList[tabIndex].children.map((item, index) => (
                <div onClick={() => detail(item, index)} key={index}>
                  <div>
                    <dl>
                      <dt>
                        <img src={item.img} />
                      </dt>
                      <div>
                        <dd>{item.title}</dd>
                        <dd>{item.yi}</dd>
                        <dd>
                          <span className="fontcolor">{item.hpl}</span>%好评率
                          <span className="fontcolor">{item.zxl}</span>咨询量
                        </dd>
                        <dd>擅长:{item.desc}</dd>
                        <dd>
                          电话:￥{item.prcic}图文:￥{item.tu}
                          <button className="btn">问医生</button>
                        </dd>
                      </div>
                    </dl>
                  </div>
                </div>
              ))}
          </div>
        </div>
      </div>
    </div>
  );
};
export default Index;
